<template>
  <div class="shopcat">
    <div class="content">
      <!-- 左边content-left -->
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo">
            <i class="icon-shopping_cart"></i>
          </div>
          <div class="num"></div>
        </div>
        <div class="price"></div>
        <div class="desc">另需配送费￥</div>
      </div>

      <!-- 右边content-right -->
      <div class="content-right" v-on:click.prevent.stop="pay">
        <div class="minPriceDesc"></div>
      </div>
    </div>
    <div class="ball_container">
      <div class="ball">
        <span class="inner inner_hook icon-remove_circle_outline"></span>
      </div>
    </div>
    <!--商品列表-->
    <div class="shopCart_list">
      <div class="list_header">
        <h3 class="title">标题</h3>
        <span class="empty">清空</span>
      </div>
      <div class="list_content">
        <ul>
          <li class="food" v-for="(food,index) in selectFoods">
            <span class="name">{{food.name}}</span>
            <div class="price">
              <span>{{food.price*food.count}}</span>
            </div>
            <div class="cartControl_wrapper">
              <cartcontrol v-on:food="food"></cartcontrol>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--&lt;!&ndash;备注&ndash;&gt;-->
    <!--<div class="mask"></div>-->
    <!--<div class="payMethods_wrapper">-->
    <!--<div class="payMethods_contener">-->
    <!--<div class="head">-->
    <!--<h2>请选择支付方式</h2>-->
    <!--</div>-->
    <!--<div class="payMethods_list">-->
    <!--<ul>-->
    <!--<li class="payMethods">-->
    <!--<i class="ico"></i>-->
    <!--<span class="info">微信支付</span>-->
    <!--</li>-->
    <!--<li class="payMethods">-->
    <!--<input type="radio">-->
    <!--<i class="ico">-->
    <!--<img src="" alt="">-->
    <!--</i>-->
    <!--<span class="info">支付宝</span>-->
    <!--</li>-->
    <!--<li class="payMethods">-->
    <!--<input type="radio">-->
    <!--<i class="ico">-->
    <!--<img src="" alt="">-->
    <!--</i>-->
    <!--<span class="info">信用卡支付</span>-->
    <!--</li>-->
    <!--<li class="payMethods">-->
    <!--<input type="radio">-->
    <!--<i class="ico">-->
    <!--<img src="" alt="">-->
    <!--</i>-->
    <!--<span class="info">网上银行</span>-->
    <!--</li>-->
    <!--</ul>-->

    <!--</div>-->
    <!--</div>-->
    <!--<div class="back">-->
    <!--<div class="backBtn">返回上一页</div>-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script type="text/ecmascript-6">
  import cartcontrol from '../cartcontrol/Cartcontrol';

  export default {
    props: {
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      },
      selectFoods: {
        type: Array,
        default: function () {
          return [
            {
              price: 20,
              count: 2
            }
          ];
        }
      }
    },
    data () {
      return {};
    },
    components: {
      'cartcontrol': cartcontrol
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .shopcat
    position fixed
    left 0
    bottom 0
    z-index 50
    width 100%
    height 48px

    .content
      display flex
      background #141d27
      font-size 0
      color rgba(255, 255, 255, 0.4)

      .content-left
        flex 1 //flex-grow 放大 flex-shrink 缩小 flex-basis 权重
        font-size 0

        .logo-wrapper
          display inline-block
          position relative
          margin 0 12px
          padding 6px
          width 56px
          height 56px
          box-sizing border-box
          border-radius 50%
          background #141d27

          .logo
            width 100%
            height 100%
            border-radius 50%
            text-align center

            .icon-shopping_cart
              font-size 24px
              background #80858a
              line-height 24px

          .num
            position absolute
            width 24px
            height 16px
            top 0
            right 0
            height 16px
            line-height 16px
            text-align center
            font-weight 700
            font-size 9px
            border-radius 16px
            background red
            color #fff
            box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4)

        .price
          display inline-block
          line-height 24px
          font-size 16px
          font-weight 700
          vertical-align top
          margin-top 12px
          padding-right 12px
          box-sizing border-box
          border-right 1px solid rgba(255, 255, 255, 0.1)

        .desc
          display inline-block
          margin 12px 0 0 12px
          line-height 12px
          font-size 12px
          height 100%
          vertical-align top
          box-sizing border-box

      .content-right
        flex 0 0 105px
        width 105px
        text-align center

        .minPriceDesc
          font-size 12px
          font-weight 700
          line-height 48px

  .ball_container
    .ball
      position fixed
      left 32px
      bottom 22px

    .shopCart_list
      position absolute //绝对布局 相对于父绝对 fixed相对布局相对于浏览器 绝对
      left 0
      top 0
      z-index -1
      width 100%

      .list_header
        height 40px
        line-height 40px
        padding 0 18px
        background #f3f5f7
        border-bottom 1px solid rgba(7, 17, 27, 0.1)

        .title
          float left
          font-size 14px

        .empty
          float right
          font-size 14px
          color rgb(0, 160, 220)

      .list_content
        max-height 279px
        padding 0 18px
        overflow hidden
        background white

        .food
          position relative
          padding 12px 0
          line-height 24px
          box-sizing border
          border-1px(rgba(7, 17, 27, 0.1))

          .name
            font-size 14px
            color: rgb(7, 17, 27)

          .price
            position: absolute
            right: 90px
            bottom: 12px
            font-size: 14px
            font-weight: 700
            color: rgb(240, 20, 20)
            margin-left: 6px
            padding: 0 12px

          .cartControl_wrapper
            position: absolute
            right: 0
            top: 6px

</style>
